<!-- 语言设置 -->

<template>
  <div style="width: 70%;height:100%;padding: 10px;box-sizing: border-box;margin: 0 auto"
       v-loading="loading">
    <p style="border-bottom: 1px solid #e8e8e8;font-size: 30px;margin: 0 0 30px 0;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px">
      <i>{{ $t('main.Language') }}</i></p>
    <span>{{ $t('main.CurrentLanguage') }}</span>
    <el-dropdown @command="changeLanguage" style="float: right">
            <span class="el-dropdown-link">
              {{ Language }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
      <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">
        <el-dropdown-item v-for="(item) in options" :key="item.value" :command="item.label">
          <span>{{ item.label }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "Settings_Language",
  created() {
    this.CurrentLanguage()
  },
  data() {
    return {
      Language: '中文',
      options: [
        {label: '中文', value: 0},
        {label: 'English', value: 1},
        {label: '日本語', value: 2},
        {label: '한국어', value: 3},
        {label: 'Русский язык', value: 4},
        {label: 'Deutsch', value: 5},
        {label: 'Français', value: 6},
      ],
      loading: false
    }
  },
  methods: {
    changeLanguage(text) {
      // 选择语言时，显示加载动画
      this.loading = true

      // 1.5秒后设置语言
      setTimeout(() => {
        // 刷新当前页面
        location.reload()

        // 当前语言
        this.Language = text
        // 设置所选语言
        if (text === '中文') {
          this.$i18n.locale = 'Chinese'
          localStorage.setItem('lang', 'Chinese')
        }
        if (text === 'English') {
          this.$i18n.locale = 'English'
          localStorage.setItem('lang', 'English')
        }
        if (text === '日本語') {
          this.$i18n.locale = 'Japanese'
          localStorage.setItem('lang', 'Japanese')
        }
        if (text === '한국어') {
          this.$i18n.locale = 'Korean'
          localStorage.setItem('lang', 'Korean')
        }
        if (text === 'Русский язык') {
          this.$i18n.locale = 'Russian'
          localStorage.setItem('lang', 'Russian')
        }
        if (text === 'Deutsch') {
          this.$i18n.locale = 'German'
          localStorage.setItem('lang', 'German')
        }
        if (text === 'Français') {
          this.$i18n.locale = 'French'
          localStorage.setItem('lang', 'French')
        }
      }, 1500)
    },
    // 当前语言
    CurrentLanguage() {
      let val = localStorage.getItem('lang');
      if (val === 'Chinese') {
        this.Language = '中文'
      } else if (val === 'English') {
        this.Language = 'English'
      } else if (val === 'Japanese') {
        this.Language = '日本語'
      } else if (val === 'Korean') {
        this.Language = '한국어'
      } else if (val === 'Russian') {
        this.Language = 'Русский язык'
      } else if (val === 'German') {
        this.Language = 'Deutsch'
      } else if (val === 'French') {
        this.Language = 'Français'
      }
    }
  }
}
</script>

<style scoped>

</style>